העלאת תמונות באמצעות File API

...
<div>
  <input type="file" name="file" id="upload_input" multiple="true" />
</div>

<div id="imageContainer">
  <ul id="imageList"></ul>
</div>
...

var fInput = $("#upload_input");
  var imgList = $("ul#imageList");
  var dropArea = $("#imageContainer");
 
  // עדכון פס המצב
  function updateProgressBar(bar, value) {
    var barWidth = bar.width();
    var bVal = -barWidth + (value * (width / 100));
    bar.attr('rel', value).css('background-position', bVal + 'px center').text(value + '%');
  }
 
 
  // טיפול באירוע של בחירת הקבצים דרך שדה סטנדרטי
  fInput.bind({
    change: function() {
      showImgs(this.files);
    }
  });
 
  dropArea.bind({
    dragenter: function() {
      $(this).addClass('highlightedBorder'); // נוסיף איזה בורדר יפה
      return false;
    },
    dragover: function() { return false; },
    dragleave: function() {
      $(this).removeClass('highlightedBorder'); // הוא כבר לא יפה
      return false;
    },
    drop: function(e) {
      var dTransfer = e.originalEvent.dataTransfer;
      showImgs(dTransfer.files);
      return false;
    }
  });
 
  // טיפול בכפתור העלאה
  $("#uploadMyImages").click(function() {
    imgList.find('li').each(function() {
      var upItem = this;
            var pBar = $(upItem).find('.progress');

            new uploaderObject({
                file:       upItem.file,
                url:        './uploader.php',
                fieldName:  'myPic',

                onprogress: function(percents) {
                    updateProgress(pBar, percents);
                },
               
                oncomplete: function(done, data) {
                    if(done) {
                        updateProgress(pBar, 100);
                    }
                }
            });
    });
  });
 
  // בדיקה האם הדפדפן שלכם גרוע
  if(window.FileReader == null) {
    log("הדפדפן שבו אתה משתמש לא תומך File API");
  }

// הצגת התמונות שבחרנו ויצירת מיניאטורות
function showImgs(files) {
  var imgType = /image.*/;
  var num = 0;
 
  $.each(files, function(i, file)) {
    // סינון תמונות
    if(!file.type.match(imgType)) return true;
   
    num++;
   
    // ניצור אלמנט של פריט רשימה ונשים בתוכו את השם, מיניאטורה ופס מצב
    var li = $('<li/>').appendTo(imgList);
    $('<div/>').text(file.name).appendTo(li);
    var img = $('<img/>').appendTo(li);
    $('<div/>').addClass('progress').attr('rel', '0').text('0%').appendTo(li);
   
    var readerObj = new FileReader();
    readerObj.onload = (function(ltImage) {
      return function(e) {
        ltImage.attr('src', e.target.result);
        ltImage.attr('width', 200);
      };
    })(img);
   
    reader.readAsDataUrl(file);
  });
}

var uploaderObject = function(params) {

    if(!params.file || !params.url) {
        return false;
    }

    this.xhr = new XMLHttpRequest();
    this.reader = new FileReader();

    this.progress = 0;
    this.uploaded = false;
    this.successful = false;
    this.lastError = false;
   
    var self = this;    

    self.reader.onload = function() {
        self.xhr.upload.addEventListener("progress", function(e) {
            if (e.lengthComputable) {
                self.progress = (e.loaded * 100) / e.total;
                if(params.onprogress instanceof Function) {
                    params.onprogress.call(self, Math.round(self.progress));
                }
            }
        }, false);

        self.xhr.upload.addEventListener("load", function(){
            self.progress = 100;
            self.uploaded = true;
        }, false);

        self.xhr.upload.addEventListener("error", function(){            
            self.lastError = {
                code: 1,
                text: 'Error uploading on server'
            };
        }, false);

        self.xhr.onreadystatechange = function () {
            var callbackDefined = params.oncomplete instanceof Function;
            if (this.readyState == 4) {
                if(this.status == 200) {
                    if(!self.uploaded) {
                        if(callbackDefined) {
                            params.oncomplete.call(self, false);
                        }
                    } else {
                        self.successful = true;
                        if(callbackDefined) {
                            params.oncomplete.call(self, true, this.responseText);
                        }
                    }
                } else {
                    self.lastError = {
                        code: this.status,
                        text: 'HTTP response code is not OK ('+this.status+')'
                    };
                    if(callbackDefined) {
                        params.oncomplete.call(self, false);
                    }
                }
            }
        };

        self.xhr.open("POST", params.url);

        var boundary = "xxxxxxxxx";
        self.xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary="+boundary);
        self.xhr.setRequestHeader("Cache-Control", "no-cache");

        var body = "--" + boundary + "\r\n";
        body += "Content-Disposition: form-data; name='"+(params.fieldName || 'file')+"'; filename='" + params.file.name + "'\r\n";
        body += "Content-Type: " + params.file.type + "\r\n\r\n";
        body += self.reader.result + "\r\n";
        body += "--" + boundary + "--";

        if(self.xhr.sendAsBinary) {
            self.xhr.sendAsBinary(body);
        } else {
            self.xhr.send(body);
        }

    };

    self.reader.readAsBinaryString(params.file);
};

$file = $_FILES['myPic'];